import { useRequest } from "ahooks";
import { articleV1ControllerShowNormal } from "@/services/auto/article";
import { useParams } from "@umijs/max";
import { Card, Skeleton, Typography, Badge } from "antd";
import { completeImgUrl, formatDateTime } from "common/utils/utils";
import Avatar from "@/components/Avatar";
import { Fragment } from "react";
import RichText from "@/components/RichText";
import Rate from "@/components/Rate";

export default function Normal(){
  const {uuid} = useParams();

  const {data, loading, error} = useRequest(()=>articleV1ControllerShowNormal({uuid: uuid!}),{
    ready: !!uuid,
  })

  return <div className="center-container pt-[16px]">
    {(()=>{
      if(!data || loading){
        return <Skeleton paragraph={{rows: 10}} />
      }
      return  <Fragment>
        <div className="flex">
          <div className="flex-1 min-w-0 mr-[16px]">
            <Typography.Title level={2} ellipsis={{rows: 2,tooltip: true}}>
              {data.title}
            </Typography.Title>
            <Rate bizUuid={data.uuid} className='mb-[8px]'/>
            <Typography.Paragraph type="secondary" className="mb-0">
              {formatDateTime(data.publishTime)}
              <span className="ml-[4px]">
                {data.keywords.map((item, index)=>{
                  return <Typography.Text key={index} keyboard>{item}</Typography.Text>;
                })}
              </span>
            </Typography.Paragraph>
          </div>
          <Card
            style={{ width: 300 }}
          >
            <Card.Meta
              avatar={<Avatar size={76} src={completeImgUrl(data.user.avatar, '?x-oss-process=image/resize,m_fill,w_76,h_76')} userName={data.user.name} />}
              title={<Typography.Title ellipsis={{tooltip: true}} level={4} className="mb-0">
                {data.user.name}
            </Typography.Title>}
              description={<Typography.Paragraph
                className="mb-0"
                ellipsis={{rows: 3, tooltip: true}}
                style={{fontSize: 12,height: 38}}
                type="secondary">
                {data.user.signature}
            </Typography.Paragraph>}
            />
          </Card>
        </div>
        {
          data.desc && <Badge.Ribbon text="引言" placement="start">
            <Card className="mt-[16px]" styles={{
              body: {
                paddingTop: 32
              }
            }}>
              {data.desc}
            </Card>
          </Badge.Ribbon>
        }
        <Card className="my-[16px]">
          <RichText content={data.ext.content} />
        </Card>
      </Fragment>
    })()}
  </div>
}
